<!DOCTYPE html>
<html>
<head>
    <title>Music Generator</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='main-style.css') }}">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <form id="form" method="POST" enctype="multipart/form-data">
            <div id="advanced-settings" class="third-box">
                
                <div class="group model-melody">
                    <div id="melody-field" class="field">
                        <label>{{ form.melody.label }}</label>
                        <input type="file" id="melody" name="melody" accept="audio/*" onchange="loadPreviewFile(event)">
                        <audio id="audio-preview" controls></audio>
                    </div>
                    <script>
                        var loadPreviewFile = function(event) {
                            var output = document.getElementById('audio-preview');
                            output.src = URL.createObjectURL(event.target.files[0]);
                            output.onloadeddata = function() {
                                URL.revokeObjectURL(output.src) // free
                            }
                        };
                    </script>

                    <div class="field">
                        <label>{{ form.model.label }}</label>
                        {{ form.model(id="model") }}
                    </div>                    
                </div>

                {% macro slider_field(name, min_value, max_value, step_value, data) %}
                <div class="field">
                    <label>{{ form[name].label }}</label>
                    <input type="range" id="{{ name }}" name="{{ name }}" min="{{ min_value }}" max="{{ max_value }}" step="{{ step_value }}" value="{{ data }}">
                    <input type="text" id="{{ name }}-text" value="{{ data }}" class="slider-value">
                </div>
                {% endmacro %}
                <div class="group slider-group">
                    <div>
                        {{ slider_field('topk', 0, 1000, 1, form.topk.data) }}
                        {{ slider_field('duration', 1, 1000, 1, form.duration.data) }}
                        {{ slider_field('cfg_coef', 1, 10, 0.1, form.cfg_coef.data) }}
                    </div>
                    <div>
                        {{ slider_field('topp', 0, 1, 0.01, form.topp.data) }}
                        {{ slider_field('temperature', 0.1, 5, 0.01, form.temperature.data) }}
                        {{ slider_field('segments', 1, 10, 1, form.segments.data) }}
                        {{ slider_field('overlap', 0, 10, 0.1, form.overlap.data) }}
                    </div>
                </div>                          

                <div class="group">
                    <div class="submit-container">
                        <div class="input-wrapper">
                            <textarea id="text" name="text" rows="3" required=""></textarea>
                            <input id="submit" name="submit" type="submit" value="Submit">
                        </div>
                    </div>
                </div>
                
            </div>
        </form>

        <div class="prompt-queue third-box"></div>
        <div class="audio-list third-box"></div>        

    </div>
</body>
<script src="{{ url_for('static', filename='main.js') }}"></script>
</html>